<template>
  <div class="box">
    
    <div class="head">
      <button class="btn1">维权列表</button>
    </div>
    <div class="storeList">
      <table  >
        <div v-for="(item,index) in list" :key="index">
          <th>
            <div style="border:1px solid blue;margin-left:20px;color:blue;width:40px;height:20px">{{item.specs}}</div>
            <p style="margin-left:20px">{{item.time}}</p>
            <p style="margin-left:20px">订单编号:{{item.txt}}</p>
            <p style="margin-left:20px ;color:white">申请退款</p>
          </th>
          <tr>
            <td style="display:flex;border: none;justify-content: space-evenly;margin-left:10px">
              <img style="width:50px; height: 50px;" :src="item.img" alt="">
              <div style="margin-left:10px;">
                <p>{{item.name}}</p>
                <p>黄色</p>
              </div>
              <div style="margin-left:20px;">
                <p>${{item.pice}}</p>
                <p>*{{item.number}}</p>
              </div>
            </td>
            <td>
              <p>{{item.user}}</p>
              <p>{{item.phone}}</p>
            </td>
            <td>
              <p>{{item.zhifu}}</p>
              <p>{{item.kuaidi}}</p>
            </td>
            <td>${{item.jiaqian}}</td>
            <td @click="god(item.id)">
              <p>查看维权</p>
              <p>维权处理</p>
            </td>
            <td>
              <p>{{item.huo}}</p>
            </td>
          </tr>
        </div>
      </table>
    </div>
  </div>
</template>

<script>
import { getzwyProtectionList } from '@/utils/api'
  export default {
    data(){
      return {
        list:[]
      }
    },
    methods:{
      god(e){
        this.$router.push('/order/protection/detail/'+e)
      }
    },
    created(){
      getzwyProtectionList().then(res=>{
        console.log(res);
        this.list = res.data.data
      })
    }
}
</script>

<style scoped>
.head{
  width: 100%;
  height: 100px;
  display: flex;
  margin-top: 50px;
}
.btn1{
  width: 80px;
  height: 30px;
  border-radius: 4px;
  background-color: rgba(220, 183, 63, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: none;
  margin: 20px 20px;
}
table {
  margin-top: 30px;
  border: 1px solid #777777;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  font-size: 14px;
}

tr {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

td {
  /* width: 150px; */
  /* height: 100%; */
  /* border: 1px solid white; */
}

th {
  width:100%;
  height: 50px;
  font-weight: normal;
  background-color: #F6F6F6;
  border: 1px solid #777777;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.storeList{
  font-size: 14px;
}
</style>
